import { Component, OnInit, Input, ChangeDetectionStrategy, OnChanges } from '@angular/core';
import { ChartCol3Data, ChartCol3Title } from '../chart-option';


@Component({
  selector: 'app-bar-col3-chart',
  templateUrl: './bar-col3-chart.component.html',
  styleUrls: ['./bar-col3-chart.component.scss'],
  changeDetection: ChangeDetectionStrategy.OnPush
})
export class BarCol3ChartComponent implements OnChanges {
  @Input() colItem: string[];
  @Input() chartCol3Title: string[];
  @Input() chartCol3Data: number[][];
  @Input() givenHeight = '400px';

  chartCol3DataCol0 = [];
  chartCol3DataCol1 = [];
  chartCol3DataCol2 = [];
  constructor() { }
  options = {};



  getHeight() {
    return this.givenHeight;
  }

  ngOnChanges(): void {
    this.chartCol3DataCol0 = this.chartCol3Data[0];
    this.chartCol3DataCol1 = this.chartCol3Data[1];
    this.chartCol3DataCol2 = this.chartCol3Data[2];
    this.options = {
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'cross',
          crossStyle: {
            color: '#999'
          }
        }
      },
      legend: {
        data: this.colItem
      },
      xAxis: [
        {
          type: 'category',
          data: this.chartCol3Title,
          axisPointer: {
            type: 'shadow'
          }
        }
      ],
      yAxis: [
        {
          type: 'value',
          name: '',
          min: 0,
          max: 100,
          interval: 20,
          axisLabel: {
            formatter: '{value}'
          }
        },
        {
          type: 'value',
          name: '',
          min: 0,
          max: 0,
          interval: 0,
          axisLabel: {
            formatter: ''
          }
        }
      ],
      series: [
        {
          name: this.colItem[0],
          type: 'bar',
          data: this.chartCol3DataCol0
        },
        {
          name: this.colItem[1],
          type: 'bar',
          data: this.chartCol3DataCol1
        },
        {
          name: this.colItem[2],
          type: 'bar',
          data: this.chartCol3DataCol2
        }
      ]
    };
  };

}
